<template>
  <div class="wrapper">
    <div class="login">
      <div class="logo">
        <img src="../assets/image/logo.jpg" alt>
      </div>
      <mu-form :model="form" class="mu-demo-form">
        <mu-form-item>
          <mu-text-field v-model="form.ip" placeholder="*主机IP"></mu-text-field>
          <div class="flex-between flex-align-center port-box">
            <mu-text-field class="port-input" v-model="form.port" placeholder="*端口号"></mu-text-field>
            <mu-button flat class="button" @click="clear()">清空</mu-button>
          </div>
        </mu-form-item>
      </mu-form>
      <div class="info-box">
        <mu-form :model="form" class="mu-demo-form">
          <mu-form-item>
            <mu-text-field v-model="options.ProductKey" placeholder="ProductKey"></mu-text-field>
            <mu-text-field v-model="options.DeviceName" placeholder="DeviceName"></mu-text-field>
            <mu-text-field v-model="options.DeviceSecret" placeholder="DeviceSecret"></mu-text-field>
            <mu-text-field v-model="options.Topic" placeholder="Topic"></mu-text-field>
          </mu-form-item>
        </mu-form>
      </div>
      <div class="connect flex-center">
        <mu-button large class="connect-btn" @click="InitConnect()">连接</mu-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import url("../assets/less/index.less");
.login {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #039588;
  opacity: 0.6;
  padding: 0.2rem 0.5rem;
}
.logo {
  height: 2rem;
  text-align: center;
}
.button {
  color: #fff;
  font-size: 0.26rem;
}
.port-box {
  width: 100%;
}
.port-input {
  width: 40%;
}
.info-box {
  p {
    text-align: center;
    color: #fff;
    line-height: 0.8rem;
  }
}
</style>
<script>
// import mqtt from "mqtt";
export default {
  data() {
    return {
      form: {
        ip: "",
        port: ""
      },
      options: {
        ProductKey: "",// 认证信息
        DeviceName: "",
        DeviceSecret: "",
        Topic: ""
      }
    };
  },
  created() {
  },
  components: {},
  methods: {
    InitConnect() {
      localStorage.setItem("form", JSON.stringify(this.form));
      localStorage.setItem("options", JSON.stringify(this.options));
      if (this.form.ip == "") {
        this.$toast.warning('请确保输入主机IP地址');
        return;
      }
      if (this.form.port == "") {
        this.$toast.warning('请确保输入端口号');
        return;
      }
      this.$router.push("/index");
    },
    clear() {
      localStorage.setItem("form", "");
      localStorage.setItem("options", "");
      this.form = {
        ip: "",
        port: ""
      };
      this.options = {
        ProductKey: "",// 认证信息
        DeviceName: "",
        DeviceSecret: "",
        Topic: ""
      };
    }
  }
};
</script>
